<!--
 * @Author: Cui Ruichen
 * @Date: 2023-03-23 16:01:12
 * @LastEditors: Cui Ruichen
 * @LastEditTime: 2023-03-23 16:01:12
 * @Description: 侧边栏
-->
<template>
  <div class="po-aside">
    <a href="#/">
      <span class="logo"></span>
      <span class="title">Polygon Admin</span>
    </a>
    <el-menu
      active-text-color="$base-column-second-menu-active"
      background-color="$base-column-first-menu-background"
      class="po-menu"
      text-color="#fff"
    >
      <el-scrollbar>
        <!-- 一级菜单 -->
        <el-sub-menu
          v-for="(oneMenuItem, oneMenuIndex) in menuList"
          :key="oneMenuIndex"
          :index="oneMenuIndex + ''"
        >
          <template #title>
            <!-- icon图标 -->
            {{ oneMenuItem.name }}
          </template>
          <!-- 二级标题 -->
          <template v-if="oneMenuItem.children?.length">
            <el-menu-item
              v-for="(twoMenuItem, twoMenuIndex) in oneMenuItem.children"
              :key="twoMenuIndex"
              :index="oneMenuIndex + 1 + '-' + twoMenuIndex + 1"
              >{{ twoMenuItem.name }}</el-menu-item
            >
          </template>
        </el-sub-menu>
      </el-scrollbar>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { constantRoutesPath } from '@/router/index'
import { RouteRecordRaw, useRouter } from 'vue-router'
import { reactive } from 'vue'

const router = useRouter()

const menuListSource: RouteRecordRaw[] = router.getRoutes()

/* 是否为默认路由 */
const isMenu = (path: string): boolean => {
  return Boolean(constantRoutesPath.includes(path))
}

interface MenuItem {
  name: string
  path: string
  children: object[]
}

/* 菜单路由 */
const menuList: MenuItem[] = reactive([])

menuListSource.forEach((item: RouteRecordRaw) => {
  if (!isMenu(item.path)) {
    console.log('item', item)
    const obj: MenuItem = {
      name: item.meta?.name as string,
      path: item.path,
      children: item.children as RouteRecordRaw[],
    }
    menuList.push(obj)
  }
})
console.log(menuList)
</script>

<style scoped lang="scss">
.po-aside {
  height: 100%;
  & > a {
    height: 60px;
    display: block;
    padding: 16px;
  }
  .po-menu {
    height: calc(100% - 60px);
    overflow: hidden;
  }
}
</style>
